<template>
    <div class="flowcontainer">
        <div class="crumb">
            <span>当前位置：</span>
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/newbook' }">新书展示</el-breadcrumb-item>
                <el-breadcrumb-item>新书展示详情页</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div>
            <div class="left" style="margin-bottom:30px;">
                <div class="top">
                    <div class="titlebox">
                        <p>出版类型</p>
                    </div>
                    <div class="contentbox">
                        <div>
                            <img src="@/assets/flow/wenxue.png" alt="/">
                            <span>文学创作</span>
                        </div>
                        <div>
                            <img src="@/assets/flow/jiaocai.png" alt="/">
                            <span>教材教辅</span>
                        </div>
                        <div>
                            <img src="@/assets/flow/xueshu.png" alt="/">
                            <span>学术专著</span>
                        </div>
                    </div>
                </div>
                <div class="bottom">
                    <div class="titlebox">
                        <p>联系方式</p>
                    </div>
                    <div class="qrcode">
                        <div>
                            <img :src="codeImage" alt="" />
                            <!-- <img src="@/assets/flow/qr.png" alt=""> -->
                        </div>
                        <span>微信扫描二维码联系客服</span>
                    </div>
                    <div class="contact">
                        <p>联系电话</p>
                        <span>项老师 15858206358</span>
                    </div>
                </div>
            </div>
            <div class="right" style="margin-bottom:30px;">
                <div class="toptitle">
                    <span>{{ newBookInfo.name }}</span>
                </div>
                <div class="bottomcontent">                   
                    <div>
                        <img :src="newBookInfo.image" alt="" @click="previewImg(newBookInfo.image)"/> 
                        <img :src="newBookInfo.fd" v-if="newBookInfo.fd" @click="previewImg(newBookInfo.fd)"/>
                        <img :src="newBookInfo.fmnw" v-if="newBookInfo.fmnw" @click="previewImg(newBookInfo.fmnw)"/>
                    </div>
                    <div>{{ newBookInfo.detail }}</div>
                </div>
                <div class="imgPreview" v-if="isShowPreImg" @click="hidePre">
                    <img :src="clickUrl"/>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import NewBookItem from '@/components/NewBookItem/NewBookItem.vue'
export default {
    data() {
        return {
            isShowPreImg:false,
            clickUrl:'',
            newbooks: [
                { url: '', bookname: '《江海联运电子航道图生产技术及应用》', press: '西安地图出版社', time: '2021.6', brief: '本书是一本针对江海联运电子航道图生产与应用的书，以国内北方某条河流电子航道图构建过程为例，详细介绍了江海联运电子航道图生产技术及应用。全书分为四个部分。第一部分对海图及电子海图的基础知识进行了介绍。第二部分介绍电子航道图生产的具体流程。' },
                { url: '', bookname: '《江海联运电子航道图生产技术及应用》', press: '西安地图出版社', time: '2021.6', brief: '本书是一本针对江海联运电子航道图生产与应用的书，以国内北方某条河流电子航道图构建过程为例，详细介绍了江海联运电子航道图生产技术及应用。全书分为四个部分。第一部分对海图及电子海图的基础知识进行了介绍。第二部分介绍电子航道图生产的具体流程。' },
                { url: '', bookname: '《江海联运电子航道图生产技术及应用》', press: '西安地图出版社', time: '2021.6', brief: '本书是一本针对江海联运电子航道图生产与应用的书，以国内北方某条河流电子航道图构建过程为例，详细介绍了江海联运电子航道图生产技术及应用。全书分为四个部分。第一部分对海图及电子海图的基础知识进行了介绍。第二部分介绍电子航道图生产的具体流程。' }
            ],
            bookname: this.$route.params.bookname,
            bookurl: this.$route.url || require('@/assets/newbook/newbook.png'),
            bookdesc: this.$route.params.brief,
            newBookInfo: {},
            
            corder: '',
            corderField: '',
            cpage: 1,
            climit: 5,
            companyInfo: [],
            codeImage: "",
        }
    },
    mounted() {
        console.log(this.$route)
        if (this.$route.params) {
            this.newBookInfo = JSON.parse(sessionStorage.getItem('bookDetail'));
        } else {
            this.newBookInfo = this.$route.params;
        }
        this.getCompanyInfo();

        console.log(this.newBookInfo);
    },
    methods: {
        getCompanyInfo() {
            this.$http.get(`/bookManagement/company/page?order=${this.corder}&orderField=${this.corderField}&page=${this.cpage}&limit=${this.climit}`).then((res) => {
                // console.log(res.data.data.list);
                this.companyInfo = res.data.data.list;
                this.codeImage = this.companyInfo[0].image;
            }).catch(() => { })
        },
        previewImg(msg){
            this.isShowPreImg = true;
            this.clickUrl = msg;
        },
        hidePre(){
            this.isShowPreImg = false;
        }
    },
    components: { NewBookItem }
}
</script>

<style scoped>
.flowcontainer {
    width: 100%;
    height: 100%;
    min-height: 1130px;
    background: rgb(239, 242, 243);
}

.crumb {
    height: 50px;
    margin: 0 240px;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.crumb span {
    color: rgb(3, 3, 3);
    font-family: PingFang SC;
    font-size: 18px;
    letter-spacing: 0px;
}

.flowcontainer>div:nth-child(2) {
    height: 100%;
    min-height: 1130px;
    display: flex;
    flex-direction: row;
    margin: 0 240px;

}

.left {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.left p {
    color: rgb(0, 27, 39);
    font-family: PingFang SC;
    font-size: 22px;
    /* line-height: 22px; */
    letter-spacing: 0px;
    text-align: left;
    margin: 0;
    padding: 0;
}

.left .top {
    height: 300px;
    background-color: white;
    display: flex;
    flex-direction: column;
}

.left .top>div:first-child {
    flex: 1;
}

.titlebox {
    display: flex;
    justify-content: center;
    align-items: center;
}

.left .top>div:last-child {
    flex: 2;
    border-top: 2px solid rgb(239, 242, 243);
    ;
}

.top .contentbox {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}

.top .contentbox img {
    height: 80px;
    width: 80px;
}

.top .contentbox span {
    display: block;
    color: rgb(0, 27, 39);
    font-family: PingFang SC;
    font-size: 20px;
    font-weight: undefined;
    line-height: 30px;
    letter-spacing: 0px;
}

.left .bottom {
    height: 700px;
    background-color: white;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
}

.bottom>div:first-child {
    flex: 1;
}

.bottom>div:last-child {
    flex: 2;
}

.qrcode {
    flex: 6;
    border-top: 2px solid rgb(239, 242, 243);
    border-bottom: 2px solid rgb(239, 242, 243);
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}

.qrcode>div {
    background-color: rgb(239, 242, 243);
    margin: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}

.qrcode img {
    width: 300px;
    height: 300px;
}

.qrcode span {
    display: inline-block;
    color: rgb(0, 27, 39);
    font-family: PingFang SC;
    font-size: 20px;

    line-height: 30px;
    letter-spacing: 0px;
    text-align: center;
}

.contact {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}

.contact p {
    color: rgb(0, 27, 39);
    font-family: PingFang SC;
    font-size: 30px;
    line-height: 44px;
    letter-spacing: 0px;
    text-align: left;
}

.contact span {
    display: inline-block;
    color: rgb(0, 27, 39);
    font-family: PingFang SC;
    font-size: 25px;
    line-height: 37px;
    letter-spacing: 0px;
    text-align: left;
}

.right {
    flex: 3;
    margin-left: 20px;
    background-color: white;
    display: flex;
    flex-direction: column;
    padding: 0 30px;
}



.toptitle {
    height: 80px;
    border-bottom: 1px solid rgb(239, 242, 243);
    display: flex;
    justify-content: center;
    align-items: center;
}

.toptitle span {
    color: rgb(0, 27, 39);
    font-family: PingFang SC;
    font-size: 22px;
    /* line-height: 22px; */
    letter-spacing: 0px;
    text-align: left;
}

.bottomcontent>div:first-child {
    /* height: 600px; */
    display: flex;
    justify-content: center;
    align-items: center;    
}


.bottom>div:nth-child(2){
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}

.bottomcontent img {
    width: 33.3%;
    height: 80%;
    padding: 50px 0 30px 0;
    /* flex:1 1 30%; */
}

.bottomcontent>div:last-child {
    /* height: 360px; */
    padding:30px 0;
    color: rgb(51, 54, 65);
    font-family: PingFang SC;
    font-size: 20px;
    /* line-height: 30px; */
    letter-spacing: 0px;
    text-align: justify;
    text-indent: 2em;
}
.imgPreview {
            /* display: none; */
            z-index: 300;
            top: 0;
            left: 0;
            width: 100%; /*容器占满整个屏幕*/
            height: 100vh;
            position: fixed;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .imgPreview img {
            
            width: 40%;
           
        }

</style>

<style>
.el-breadcrumb__inner{
	font-size: 18px !important;
}
.el-breadcrumb__inner a:hover, .el-breadcrumb__inner.is-link:hover {
    color: #24797d;
}
</style>